<template>
	<div class="projectDetailContent">
		<div class="control">
			<div class="title">{{currentData.name || ''}}</div>
			<a-button type="primary" @click="handleClick({name: '编辑'})">编辑</a-button>
			<a-button v-if="currentData.template == 0" style="margin-left: 10px;" @click="handleClick({name: '维护项目成果'})">维护项目成果</a-button>
		</div>
		<div class="content">
			<div class="item"  v-if="currentData.template == 0 && currentData.newProjectResultFileList && currentData.newProjectResultFileList.length">
				<div class="label">项目成果展示</div>
				<div class="value">
					<a-carousel arrows>
						<template #prevArrow>
							<div class="custom-slick-arrow" style="left: 10px; z-index: 1;font-size: 30px;color: #d2ccdd;">
								<LeftCircleOutlined />  
							</div>
						</template>
						<template #nextArrow>
							<div class="custom-slick-arrow" style="right: 20px;font-size: 30px;color: #d2ccdd;">
								<RightCircleOutlined />
							</div>
						</template>
						<div class="imagesBox" v-for="(item, index) in currentData.newProjectResultFileList">
							<div class="img">
								<img :src="item[0]?.fileUrl"  @click.stop="((visible = true), (current = (index*2)+0))">
							</div>
							<div class="img">
								<img :src="item[1]?.fileUrl"  @click.stop="((visible = true), (current = (index*2)+1))">
							</div>
						</div>
					</a-carousel>
				</div>
			</div>
			
			<div class="item" v-if="currentData.template == 0 && currentData.resultLink">
				<div class="label">项目成果链接</div>
				<div class="value">{{currentData.resultLink ||'暂无'}}</div>
			</div>


			<div class="item">
				<div class="label">项目简介</div>
				<div class="value"><div v-html="currentData.describe||'暂无' "></div></div>
			</div>
			<div class="item">
				<div class="label">项目目标</div>
				<div class="value"><div v-html="currentData.target||'暂无' "></div></div>
			</div>
			<div class="item">
				<div class="label">项目周期</div>
				<div class="value">{{currentData.startTime || ''}} 至 {{currentData.endTime || ''}}</div>
			</div>
			<div class="item">
				<div class="label">报名时间</div>
				<div class="value">{{currentData.registrationStartTime || ''}} 至 {{currentData.registrationEndTime || ''}}</div>
			</div>
			<div class="item" style="flex-direction: row;">
				<div class="label">
					项目难度
				</div>
				<a-rate disabled style="margin-left: 20px;" v-model:value="currentData.difficulty" />
			</div>
			<div class="item" style="flex-direction: row;">
				<div class="label">
					项目基本信息
				</div>
				<div class="sonBox">
					<div class="sonItem">
						<div class="sonLabel">项目类型</div>
						<div class="sonValue">{{currentData.category}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">项目模板</div>
						<div class="sonValue">{{currentData.template == 1 ? '多组协作' : '经典'}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">开发模型</div>
						<div class="sonValue">{{currentData.devModelName}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">年级</div>
						<div class="sonValue">{{currentData.grade}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">班级</div>
						<div class="sonValue">{{formatClass(currentData.gradeClassList)}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">成员总数</div>
						<div class="sonValue">{{currentData.totalMemberLimit}}</div>
					</div>
					
					<div class="sonItem" v-if="currentData.template == 1">
						<div class="sonLabel">小组人数设置</div>
						<div class="sonValue">{{currentData.groupMemberLimit}}</div>
					</div>
				</div>
			</div>

			<div class="item">
				<div class="label">课程</div>
				<div class="value">{{ formatCourse(currentData.courseList)}}</div>
			</div>

			<div class="item" >
				<div class="label">
					岗位设置情况
				</div>
				<div class="value">
					<a-table :dataSource="currentData.projectJobList" :columns="tableColumns" :pagination="false" />
				</div>
			</div>
			<div class="item" >
				<div class="label">
					评分标准
				</div>
				<div class="value">
					<div v-html="currentData.scoreStandard||'暂无' "></div>
				</div>
			</div>
			<div class="item" >
				<div class="label">
					主指导老师
				</div>
				<div class="teacherBox">
					<div class="teacherItem">
						<img src="@/assets/user.png" alt="头像">
						<div>
							<div>{{currentData?.mainTeacher?.teacherName}}</div>
							<!-- <div style="margin-top: 10px;">教师技能</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="item" >
				<div class="label">
					副指导老师
				</div>
				<div class="teacherBox">
					<div class="teacherItem" v-for="item in currentData?.coTeacherList" :key="item.id">
						<img src="@/assets/user.png" alt="头像">
						<div>
							<div>{{item.teacherName}}</div>
							<!-- <div style="margin-top: 10px;">教师技能</div> -->
						</div>
					</div>
				</div>
			</div>

		</div>

		<a-image-preview-group v-if="visible" :preview="{ visible, onVisibleChange: () => visible = false, current }">
			<a-image
				v-for="(item) in currentData.projectResultFileList"
				:width="200"
				:style="{ display: 'none' }"
				:src="item.fileUrl"
			/>
		</a-image-preview-group>
	</div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits,onMounted } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'

const visible = ref(false)
const current = ref(0)

const { currentData } = defineProps({
  currentData: { type: Object, default: {} },
})
const tableColumns = [
	{ title: '岗位', dataIndex: 'name', key: 'name' },
	{ title: '人数', dataIndex: 'requiredNum', key: 'requiredNum' },
	{ title: '技能', dataIndex: 'skill', key: 'skill' },
]
const editFlag = () => {
	return new Date(currentData.startTime) < new Date()
}
const formatCourse = courseList => {
	if (!courseList) return ''
	return courseList.map(item => item.courseName).join('，')
}
const formatClass = gradeClassList => {
	if (!gradeClassList) return ''
	return gradeClassList.map(item => item.gradeClassName).join('，')
}

const emit = defineEmits()

const handleClick = ({name}) => {
	emit('handleClick', {name, item: currentData})
}

</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
.projectDetailContent {
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #d7d2e2;
	border-radius: 10px;
	padding: 20px;
	color: #333;
	.control {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-bottom: 10px;
		.title {
			flex: 1;
			padding:12px 20px;
			border-radius: 5px;
			background: #fff;
			text-align: center;
			font-weight: bold;
			font-size: 18px;
			margin-right: 10px;
		}
	}
	.content {
		min-height: 0;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		
		.item {
			margin-top: 15px;
			display: flex;
			flex-direction: column;
		}
		.label {
			display: flex;
			min-width: 100px;
		}
		.value {
			margin-top: 10px;
			width: 100%;
			padding:12px;
			border-radius: 5px;
			background: #fff;
		}
		.sonBox {
			display: flex;
			flex-wrap: wrap;
			margin-left: 20px;
			flex: 1;
			.sonItem {
				display: flex;
				flex-direction: column;
				font-size: 14px;
				margin-bottom: 10px;
				margin-right: 15px;
				.sonLabel {}
				.sonValue {
					margin-top: 10px;
					padding:12px;
					border-radius: 5px;
					background: #fff;
					width: 200px;
				}
			}
		}
		.teacherBox {
			margin-top: 15px;
			display: flex;
			flex-wrap: wrap;
			.teacherItem {
				margin-right: 15px;
				display: flex;
				align-items: center;
				padding: 12px;
				width: 200px;
				height: 80px;
				background: #fff;
				border-radius: 10px;
				margin-right: 15px;
				margin-bottom: 15px;
				img {
					width: 45px;
					margin-right: 10px;
				}
			}
		}
		.imagesBox{
			width: 100%;
			height: 200px;
			display: flex !important;
			justify-content: space-around;
			align-items: center;
			.img {
				width: 50%;
				/* border: 1px solid #d7d2e2; */
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					cursor: pointer;
					max-height: 100%;
					max-width: 100%;
				}
			}
		}
	}
}
:deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #ecf3fe;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>